<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <title>MyPetStore</title>
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div th:replace="/common/Header :: header"></div>
<div id="Content">
    <div id="Welcome">
        <div id="WelcomeContent">
            Welcome to MyPetStore!
        </div>
    </div>
    <div id="context2"
         style="background:white;border: 1px solid black;width: 320px;height: 600px;position: absolute;top: 100px;left:1000px;display:none "></div>

    <script>
        $(document).ready(function () {
            $("#FISH_EXPLAIN").mouseenter(function (e) {
                $("#context2").width(320).height(200).css("display", "block")
                    .html("There are four types of fish:<br>" +
                        "<br>Koi:Fresh Water fish from Japan<br>" +
                        "<br>Goldfish:Fresh Water fish from China<br>" +
                        "<br>Angelfish:Salt Water fish from Australia<br>" +
                        "<br>Tiger Shark:Salt Water fish from Australia<br>" +
                        "<img src='../images/fish2021.jpg' width='320'> ")
                    .offset({top: e.pageY - 200, left: e.pageX - 320});

            }).mouseleave(function () {
                $("#context2").css("display", "none").html("");
            });
            $("#DOGS_EXPLAIN").mouseenter(function (e) {
                $("#context2").width(320).height(300).css("display", "block")
                    .html("There are six types of dogs:<br>" +
                        "<br>Bulldog:Friendly dog from England<br>" +
                        "<br>Chihuahua:Great companion dog<br>" +
                        "<br>Dalmation:Great dog for a Fire Station<br>" +
                        "<br>Poodle:Cute dog from France<br>" +
                        "<br>Golden Retriever:Great family dog<br>" +
                        "<br>Labrador Retriever:Great hunting dog<br>" +
                        "<img src='../images/dog2021.jpg' width='320'> ")
                    .offset({top: e.pageY - 300, left: e.pageX - 320});
            })
                .mouseleave(function () {
                    $("#context2").css("display", "none").html("");
                });
            $("#REPTILES_EXPLAIN").mouseenter(function (e) {
                $("#context2").width(320).height(130).css("display", "block")
                    .html("There are two types of reptiles:<br>" +
                        "<br>Iguana:Friendly green friend<br>" +
                        "<br>Rattlesnake:Doubles as a watch dog<br>" +
                        "<img src='../images/xiyi2021.jpg' width='320'> ")
                    .offset({top: e.pageY - 130, left: e.pageX - 320});
            })
                .mouseleave(function () {
                    $("#context2").css("display", "none").html("");
                });
            $("#CATS_EXPLAIN").mouseenter(function (e) {
                $("#context2").width(390).height(110).css("display", "block")
                    .html("There are two types of cats:<br>" +
                        "<br>Persian:Friendly house cat, doubles as a princess<br>" +
                        "<br>Manx:Great for reducing mouse populations<br>" +
                        "<img src='../images/cat2021.jpg' width='390' height='280'> ")
                    .offset({top: e.pageY - 110, left: e.pageX});
            })
                .mouseleave(function () {
                    $("#context2").css("display", "none").html("");
                });
            $("#BIRDS1_EXPLAIN").mouseenter(function (e) {
                $("#context2").width(400).height(110).css("display", "block")
                    .html("There are two types of birds:<br>" +
                        "<br>Amazon Parrot:Great companion for up to 75 years<br>" +
                        "<br>Finch:Great stress reliever<br>" +
                        "<img src='../images/bird2021.jpg' width='400'> ")
                    .offset({top: e.pageY - 110, left: e.pageX});
            })
                .mouseleave(function () {
                    $("#context2").css("display", "none").html("");
                });
            $("#BIRDS2_EXPLAIN").mouseenter(function (e) {
                $("#context2").width(400).height(110).css("display", "block")
                    .html("There are two types of birds:<br>" +
                        "<br>Amazon Parrot:Great companion for up to 75 years<br>" +
                        "<br>Finch:Great stress reliever<br>" +
                        "<img src='../images/bird2021.jpg' width='400'> ")
                    .offset({top: e.pageY - 110, left: e.pageX});
            })
                .mouseleave(function () {
                    $("#context2").css("display", "none").html("");
                });
        });
    </script>
    <div id="Main">
        <!--主页侧边栏 因为写死注释了-->
        <!--        <div id="Sidebar">-->
        <!--            <div id="SidebarContent">-->
        <!--                <a href="/catalog/ViewCategory?categoryId=FISH"><img src="../images/fish_icon.gif"/></a>-->
        <!--                <br/> Saltwater, Freshwater <br/>-->
        <!--                <a href="/catalog/ViewCategory?categoryId=DOGS"><img src="../images/dogs_icon.gif"/></a>-->
        <!--                <br/> Various Breeds <br/>-->
        <!--                <a href="/catalog/ViewCategory?categoryId=CATS"><img src="../images/cats_icon.gif"/></a>-->
        <!--                <br/> Various Breeds, Exotic Varieties <br/>-->
        <!--                <a href="/catalog/ViewCategory?categoryId=REPTILES"><img src="../images/reptiles_icon.gif"/></a>-->
        <!--                <br/> Lizards, Turtles, Snakes <br/>-->
        <!--                <a href="/catalog/ViewCategory?categoryId=BIRDS"><img src="../images/birds_icon.gif"/></a>-->
        <!--                <br/> Exotic Varieties-->
        <!--            </div>-->
        <!--        </div>-->
        <div id="Sidebar">
            <div id="SidebarContent">
                <div th:each="categoryObject,status : ${categoryList}" >
                    <a th:href="'/catalog/ViewCategory?categoryId='+${categoryObject.categoryId}" th:utext="${categoryObject.getDescription()}"></a>
                </div>
            </div>
        </div>
        <!--主页大图 因为写死注释了-->
        <!--        <div id="MainImage">-->
        <!--            <div id="MainImageContent">-->
        <!--                <map name="estoremap">-->
        <!--                    <area alt="Birds" coords="72,2,280,250" href="/catalog/ViewCategory?categoryId=BIRDS" shape="rect"-->
        <!--                          id="BIRDS1_EXPLAIN"/>-->
        <!--                    <area alt="Fish" coords="2,180,72,250" href="/catalog/ViewCategory?categoryId=FISH" shape="rect"-->
        <!--                          id="FISH_EXPLAIN"/>-->
        <!--                    <area alt="Dogs" coords="60,250,130,320" href="/catalog/ViewCategory?categoryId=DOGS" shape="rect"-->
        <!--                          id="DOGS_EXPLAIN"/>-->
        <!--                    <area alt="Reptiles" coords="140,270,210,340" href="/catalog/ViewCategory?categoryId=REPTILES" shape="rect"-->
        <!--                          id="REPTILES_EXPLAIN"/>-->
        <!--                    <area alt="Cats" coords="225,240,295,310" href="/catalog/ViewCategory?categoryId=CATS" shape="rect"-->
        <!--                          id="CATS_EXPLAIN"/>-->
        <!--                    <area alt="Birds" coords="280,180,350,250" href="/catalog/ViewCategory?categoryId=BIRDS" shape="rect"-->
        <!--                          id="BIRDS2_EXPLAIN"/>-->
        <!--                </map>-->
        <!--                <img height="355" src="../images/splash.gif" align="middle" usemap="#estoremap" width="350"/>-->
        <!--            </div>-->
        <!--        </div>-->
        <div id="Separator">&nbsp;</div>
    </div>
</div>
<div th:replace="/common/Footer :: footer"></div>
</body>
</html>